<template>
  <div  class="tiktok-container">
    <div  class="video-list" >
      <div v-for="items in video" :key="items.videoId" class="video-item">
        <!-- 视频内容 -->
        <video controls autoplay  loop>
          <source :src="items.videoAddress" type="video/mp4">
        </video>

        <div class="video-info">
          <!-- 视频信息 -->
          <h3>标题:{{ items.videoName }}</h3>
          <p>内容:{{ items.videoCaption }}</p>
        </div>
      </div>
    </div>
    <el-button type="primary" v-if="form.pageNum==1" disabled primary @click="prevVideo">上一个</el-button>
    <el-button type="primary" v-if="form.pageNum!=1" primary @click="prevVideo">上一个</el-button>
    <el-button type="primary" primary @click="handleSwipeUp">下一个</el-button>
  </div>
</template>

<script>
  //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
  //例如:import <组件名称> from '<组件路径>'================================================================================

  //主
  import {healthVideoList} from "@/api/system/patients";

  export default {

    //import引入的组件需要注入到对象中才能使用=================================================================================
    components: {},
    props: {},
    data() {
      //这里存放数据======================================================================================================
      return {
        form:{
          pageNum:1,
          pageSize:1
        },
        video:[]
      };
    },
    //计算属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合===========================================================================================================
    methods: {
      handleSwipeUp(){
        this.form.pageNum = this.form.pageNum + 1
        this.videoLis()
      },
      prevVideo(){
        this.form.pageNum = this.form.pageNum - 1
        this.videoLis()
      },
      videoLis(){
        healthVideoList(this.form).then((res)=>{
          if(res.code === 200){
            this.video = res.data.list
          }
        })
      }
    },
    //生命周期 - 创建完成(可以访问当前this实例)
    created() {
      this.videoLis()
    },
    //生命周期 - 挂载完成(可以访问DOM元素)
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前
    beforeMount() {
    }, //生命周期 - 挂载之前
    beforeUpdate() {
    }, //生命周期 - 更新之前
    updated() {
    }, //生命周期 - 更新之后
    beforeDestroy() {
    }, //生命周期 - 销毁之前
    destroyed() {
    }, //生命周期 - 销毁完成
    activated() {
    } //如果页面有keep-alive缓存功能,这个函数会触发
  };
</script>
<style scoped>
.tiktok-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.video-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.video-item {
  position: relative;
  width: 400px;
  height: 1000px;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.video-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
}

.video-info h3 {
  margin: 0;
  font-size: 16px;
}

.video-info p {
  margin: 5px 0 0;
  font-size: 14px;
}
</style>

